<template>
  <div class="meeting-list-pro">
    <!-- 音视频会议弹框 -->
    <el-dialog
      v-model="showMeeting"
      :title="currentMeeting?.title"
      width="90%"
      :close-on-click-modal="false"
      :show-close="false"
      destroy-on-close
      class="meeting-dialog"
    >
      <VideoMeeting
        :room-name="currentMeeting?.id"
        :display-name="currentUser?.name"
        :meeting-title="currentMeeting?.title"
        :is-audio-only="false"
        @end-meeting="handleMeetingEnd"
      />
    </el-dialog>
    <!-- 加载状态 -->
    <div v-if="loading" class="flex justify-center items-center py-12">
      <el-skeleton :rows="3" animated />
    </div>
    
    <!-- 会议列表 -->
    <template v-else>
      <div v-for="meeting in meetings" :key="meeting.id" class="meeting-row" @click="onDetail(meeting)">
        <div class="status-bar" :class="statusClass(meeting.status)" />
        <div class="main-info">
          <div class="title">{{ meeting.title }}</div>
          <div class="meta">
            <span><Timer /> {{ meeting.startTime }}</span>
            <span><Clock /> {{ meeting.durationMinutes }}分钟</span>
            <span><UserFilled /> 创建人：{{ meeting.name }}</span>
            <span><Clock /> 创建时间：{{ meeting.createTime }}</span>
          </div>
          <div class="meeting-detail-brief" v-if="meeting.detail">{{ meeting.detail }}</div>
        </div>
        <div class="actions-btns" @click.stop>
          <el-button size="small" class="action-btn main" @click="$emit('detail', meeting)"><View class="el-icon" /> 详情</el-button>
          <el-button size="small" class="action-btn" v-if="meeting.statusDesc != '已结束' && meeting.statusDesc!= '已取消'" @click="$emit('invite', meeting)"><Message class="el-icon" /> 邀请</el-button>
          <el-button size="small" class="action-btn" @click="$emit('manageParticipants', meeting)"><User class="el-icon" /> 参会人</el-button>
          <el-button size="small" class="action-btn" v-if="type==='mine' && meeting.statusDesc != '已结束' && meeting.statusDesc!= '已取消'" @click="$emit('edit', meeting)"><Edit class="el-icon" /> 编辑</el-button>
          <el-button size="small" class="action-btn warning" v-if="type==='mine' && meeting.statusDesc != '已结束' && meeting.statusDesc!= '已取消'" @click="$emit('cancel', meeting)"><Close class="el-icon" /> 取消</el-button>
          <el-button size="small" class="action-btn danger" v-if="type==='mine'" type="danger" @click="$emit('delete', meeting)"><Delete class="el-icon" /> 删除</el-button>
          <el-button size="small" class="action-btn main" type="primary" v-if="meeting.statusDesc != '已结束' && meeting.statusDesc!= '已取消'" @click="$emit('join', meeting)"><Check class="el-icon" /> 参与</el-button>
          <!-- <el-button size="small" class="action-btn main" type="primary" v-if="type !== 'ended'" @click="startMeeting(meeting)"><Check class="el-icon" /> 参与</el-button> -->
          <!-- <el-button size="small" class="action-btn webview" type="success"  v-if="type !== 'ended'" @click="$emit('join', meeting)"><Monitor class="el-icon" /> Webview</el-button> -->
        </div>
      </div>
      
      <!-- 空状态 -->
      <div v-if="!meetings.length" class="text-center text-slate-400 py-12">暂无会议安排</div>
    </template>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { Timer, Clock, User, View, Message, Edit, Delete, Check, UserFilled, Plus, Close, Monitor } from '@element-plus/icons-vue'
import VideoMeeting from '@/components/meeting/VideoMeeting.vue'
import { useChatStore } from '@/stores/chatStore'
const props = defineProps({
  meetings: Array,
  type: String,
  loading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['edit', 'delete', 'cancel', 'invite', 'manageParticipants', 'detail', 'exit', 'create', 'join'])

const chatStore = useChatStore()
const currentUser = computed(() => chatStore.loginUserInfo)

// 会议相关
const showMeeting = ref(false)
const currentMeeting = ref(null)

function handleMeetingEnd() {
  showMeeting.value = false
  currentMeeting.value = null
}
// 移除分组逻辑，直接使用传入的会议列表
function statusClass(status) {
  if (status === '进行中') return 'bar-ongoing'
  if (status === '未开始') return 'bar-notstart'
  if (status === '已结束') return 'bar-ended'
  if (status === '已取消') return 'bar-cancel'
  return ''
}
function onDetail(meeting) {
  emit('detail', meeting)
}

function startMeeting(meeting) {
  currentMeeting.value = meeting
  showMeeting.value = true
}
</script>
<style scoped>
.meeting-list-pro {
  width: 100%;
}
.meeting-list-header {
  padding: 1rem;
}
.create-meeting-btn {
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 0 2.2rem;
  box-shadow: 0 2px 12px 0 rgba(56,112,255,0.10);
  transition: box-shadow 0.18s, transform 0.18s, background 0.18s;
  display: flex;
  align-items: center;
}
.create-meeting-btn:hover {
  background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
  box-shadow: 0 6px 24px 0 rgba(56,112,255,0.18);
  transform: translateY(-2px) scale(1.04);
}
.create-meeting-btn .el-icon {
  font-size: 18px;
  margin-right: 6px;
}
.group-title {
  color: #2563eb;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #fafdff 60%, #e6f0fa 100%);
  box-shadow: 0 2px 8px 0 #2563eb0a;
  border-radius: 1.2rem 1.2rem 0 0;
  margin-bottom: 1.2rem;
  margin-top: 2.2rem;
  padding-left: 0.7rem;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.group-bar {
  width: 6px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
  margin-right: 8px;
  flex-shrink: 0;
  box-shadow: 0 0 8px 2px #2563eb22;
}
.meeting-row {
  display: flex;
  align-items: flex-start;
  background: linear-gradient(90deg, #fafdff 0%, #f6f8fa 100%);
  border-radius: 1.5rem;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.04);
  margin-bottom: 0.8rem;
  padding: 1.1rem 1.3rem 1.1rem 0.8rem;
  transition: box-shadow 0.22s cubic-bezier(.4,0,.2,1), transform 0.18s, border 0.18s, background 0.18s;
  border: 1.5px solid #f0f3fa;
  cursor: pointer;
  position: relative;
  min-height: 70px;
  /* max-width: 900px; */
  margin-left: auto;
  margin-right: auto;
}
.meeting-row:hover {
  box-shadow: 0 8px 32px 0 rgba(56, 112, 255, 0.13);
  border-color: #2563eb;
  background: linear-gradient(90deg, #e6f0fa 0%, #fafdff 100%);
  transform: translateY(-2px) scale(1.025);
}
.meeting-row:active {
  transform: scale(0.98);
}
.status-bar {
  width: 8px;
  height: 80px;
  border-radius: 8px;
  margin-right: 24px;
  margin-top: 0;
  box-shadow: 0 0 8px 2px rgba(56,112,255,0.08);
  transition: box-shadow 0.2s;
}
.bar-ongoing {
  background: linear-gradient(180deg, #34d399 0%, #2563eb 100%);
  box-shadow: 0 0 8px 2px #34d39933;
}
.bar-notstart {
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 0 8px 2px #60a5fa33;
}
.bar-ended {
  background: linear-gradient(180deg, #b0b8c9 0%, #e6eaf2 100%);
}
.bar-cancel {
  background: linear-gradient(180deg, #f87171 0%, #fbbf24 100%);
  box-shadow: 0 0 8px 2px #f8717133;
}
.main-info {
  flex: 1 1 0;
  min-width: 0;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: flex-start;
}
.title {
  font-size: 1.18rem;
  font-weight: 900;
  color: #2563eb;
  margin-bottom: 0;
  letter-spacing: 0.5px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 0;
  margin-bottom: 0;
  overflow-x: auto;
  white-space: nowrap;
}
.meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #f3f6fa;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 13px;
  color: #7b8baa;
  line-height: 1.7;
  height: 24px;
  min-width: 0;
  box-sizing: border-box;
  font-weight: 500;
}
.meta .el-icon,
.meta .el-icon > svg {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  color: #60a5fa;
  margin-right: 3px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actions-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 18px;
  background: transparent;
  border-radius: 2rem;
  padding: 0.15rem 0.4rem;
  box-shadow: none;
  transition: box-shadow 0.18s, background 0.18s, transform 0.18s;
  position: relative;
}
.actions-btns:hover {
  background: linear-gradient(90deg, #e6f0fa 0%, #fafdff 100%);
  box-shadow: 0 6px 24px 0 rgba(56, 112, 255, 0.13);
  transform: translateY(-2px) scale(1.03);
}
.action-btn {
  min-width: 56px;
  font-weight: 500;
  border-radius: 1.5rem;
  transition: background 0.18s, color 0.18s, border 0.18s, transform 0.18s;
  box-shadow: 0 1px 4px 0 rgba(56,112,255,0.04);
  background: #fff;
  border: 1.5px solid #e6eaf2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 13px;
}
.action-btn.main,
.action-btn[type='primary'] {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 #2563eb22;
}
.action-btn.webview,
.action-btn[type='success'] {
  background: linear-gradient(90deg, #059669 0%, #10b981 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 #05966922;
}
.action-btn.warning {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 #f59e0b22;
}
.action-btn.danger,
.action-btn[type='danger'] {
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px 0 #f8717122;
}
.action-btn:hover {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
  color: #fff;
  border-color: #2563eb;
  transform: scale(1.06);
}
.action-btn.webview:hover,
.action-btn[type='success']:hover {
  background: linear-gradient(90deg, #047857 0%, #059669 100%);
  color: #fff;
  border-color: #047857;
  transform: scale(1.06);
}
.action-btn.warning:hover {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  color: #fff;
  border-color: #f59e0b;
  transform: scale(1.06);
}
.action-btn.danger:hover,
.action-btn[type='danger']:hover {
  background: linear-gradient(90deg, #f87171 0%, #fbbf24 100%);
  color: #fff;
  border-color: #f87171;
  transform: scale(1.06);
}
.action-btn .el-icon {
  font-size: 15px;
  color: inherit;
  margin-right: 2px;
}
.meeting-detail-brief {
  color: #a0aec0;
  font-size: 12px;
  margin-top: 1px;
  line-height: 1.5;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
@media (max-width: 900px) {
  .meeting-row {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 0.7rem;
  }
  .main-info {
    max-width: 100%;
    align-items: flex-start;
  }
  .actions-btns {
    margin-left: 0;
    margin-top: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem;
    gap: 10px;
  }
  .group-title {
    font-size: 1.1rem;
    padding-left: 0.2rem;
    margin-top: 1.2rem;
    margin-bottom: 0.7rem;
  }
  .group-bar {
    height: 20px;
    width: 6px;
  }
}
</style>